<!doctype html>
<html lang='en'>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="Pragma" content="no-cache">
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      column-count: 4;
      column-gap: 10px;
    }

    .container div {
      position: relative;
      counter-increment: item-counter;
    }

    .container img {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
    }

    .container div::after {
      position: absolute;
      display: block;
      top: 2px;
      left: 2px;
      height: 24px;
      width: 24px;
      z-index: 100;
      text-align: center;
      color: white;
      line-height: 24px;
      background-color: #000;
      content: counter(item-counter);
    }
  </style>
</head>

<body>
  <div class="container">
    <div>
      <img src="https://source.unsplash.com/random?1" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?2" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?3" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?4" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?5" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?6" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?7" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?8" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?9" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?10" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?11" alt="">
    </div>
    <div>
      <img src="https://source.unsplash.com/random?12" alt="">
    </div>
  </div>
</body>

</html>